<template>
  <div>
    <van-nav-bar left-text="返回" title="权益列表" right-text="新增＋" left-arrow
                 @click-left="$router.push('/mine/stock')"
                 @click-right="showPopup = true"/>
    <van-cell-group :style="{ height: `${tableHeight}px`, overflow: 'auto' }">
      <van-cell v-for="(item, index) in tableData" :key="index" :title="item.board">
        <template #default>
          <van-icon name="clock-o" color="#ee0a24">
            {{ toDateString(new Date(item.expired_at * 1000)) }}
          </van-icon>
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import {toDateString} from '@/utils'

export default {
  computed: {
    tableHeight() {
      return window.innerHeight - 88
    }
  },
  data() {
    return {
      queryParams: {
        page: 1,
        limit: 20,
        order_by: 'updated_at',
        sort_direction: -1
      },
      tableData: [],
      showPopup: false,
      quantity: 0
    }
  },
  methods: {
    toDateString,
    load() {
      this.$requests.post('/china_stock/rights/obtain', this.queryParams).then(resp => {
        this.tableData = resp
      })
    }
  },
  mounted() {
    this.load()
  }
}
</script>
